<template>

  <div class="page">

    <ad6-html></ad6-html>

    <div class="page-content pt-24">
      <div class="layout">
        <div class="left mr-24">
          <news-title :obj="newsDetail" />
          <!-- <div v-if="showBanner" class="article-banner">
            <img
              class="banner-img img-cover"
              :src="bannerList[0].imageUrl"
              @click.stop="bannerJump(bannerList[0])"
            />
          </div> -->

          <div
            ref="newsContent"
            class="ql-editor"
            v-html="newsDetail.content"
          ></div>

          <link-topic
            v-if="
              newsDetail.relation_subjects &&
              newsDetail.relation_subjects.length > 0
            "
            :obj="newsDetail.relation_subjects[0]"
          />

          <statement />

          <share-box :obj="newsDetail" />

          <div class="cross-line mb-48"></div>
          <comment :obj="newsDetail" />
        </div>
        <div class="right">
          <hot-and-recommended :hot-list="hotList" :related-list="relatedList" />
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import HotAndRecommended from '@/components/HotAndRecommended.vue';
import NewsTitle from '@/components/NewsTitle.vue';
import ShareBox from '@/components/ShareBox.vue';
import Statement from '@/components/Statement.vue';
import LinkTopic from '@/components/LinkTopic.vue';
import Comment from '@/components/Comment.vue';
import Ad6Html from '@/components/Ad6Html.vue';

export default {
  name: 'ArticlePage',

  components: {
    HotAndRecommended,
    NewsTitle,
    ShareBox,
    Statement,
    LinkTopic,
    Comment,
    Ad6Html
  },

  async asyncData({ $API, params, error }) {
    const id = params.id.replace(/\.html$/, '');
    const [newsDetail, hotList, relatedList, bannerList] = await Promise.all([
      $API.articleGetNewsDetail({
        news_id: id,
        news_type: 1
      }),
      $API.articleGetAuthorHotNews({
        newsId: id
      }),
      $API.articleGetRelatedList({
        newsType: 1,
        news_id: id
      }),
      $API.articleGetBannerList({ sourceType: 19 })
    ]);

    if (!newsDetail) {
      return error({ statusCode: 404 });
    }

    const authorId = newsDetail.member_id || newsDetail.memberId;
    const banner = bannerList.filter(item => item.authorId == authorId);

    return {
      newsDetail,
      hotList,
      relatedList,
      bannerList: banner || []
    };
  },

  data() {
    return {
      hideLan: true, // 禁止切换语言
      channelListData: [], // 频道列表
      channelId: '', // 频道id
      banner_list: {}, // banner
      isOpenCoin: false, // 金币任务开启,
      newsDetail: {},
      related_list: [], // 精彩推荐数据
      vshareConfig: {}, // 分享配置
      scrollTop: '', // 获取滚动条到顶部的距离
      scrollHeight: '', // 获取文档区域高度
      windowHeight: '', // 获取window的高度
      hotList: [], // 热门作品
      relatedList: [], // 精彩推荐
      bannerList: []
    };
  },

  head() {
    const article = this.newsDetail;
    return this.$mergeSeoHead(this.$getArticleSeoHead(article), {
      script: [
        {
          src: '/share/social-share.min.js',
          type: 'text/javascript',
          charset: 'utf-8'
        }
      ],
      link: [{ rel: 'stylesheet', href: '/share/share.min.css' }]
    });
  },

  computed: {
    showBanner() {
      const { bannerList, newsDetail } = this;
      return (
        bannerList &&
        bannerList.length > 0 &&
        bannerList[0].authorId === (newsDetail.member_id || newsDetail.memberId)
      );
    }
  },

  created() {
    this.vshareConfig = {
      // 此处放分享列表（ID）
      shareList: ['fbook', 'twi', 'weixin'],

      // 此处放置通用设置
      common: {
        bdText: this.newsDetail.title, // 分享的内容
        bdDesc: this.newsDetail.summary, // 分享的摘要
        bdPic: this.newsDetail.thumbs[0] // 分享的图片
      },
      share: [{}],
      slide: false, // 此处放置浮窗分享设置
      image: false, // 此处放置图片分享设置,
      selectShare: false // 此处放置划词分享设置
    };
  },

  mounted() {
    this.$nextTick(() => {
      setTimeout(this.modifyHref, 500);
    });
  },

  methods: {
    modifyHref() {
      const fatherDom = this.$refs.newsContent;
      const as = fatherDom.querySelectorAll('a[data-value]');
      if (!as || as.length === 0) return;

      as.forEach(dom => {
        const query =
          dom.href
            .split('?')[1]
            .split('&')
            .reduce((p, t) => {
              const [key, value] = t.split('=');
              p[key] = value;
              return p;
            }, {}) || {};

        if (query.link) {
          dom.href = query.link;
        }
      });
    },

    bannerJump(obj) {
      // type = 3 不做跳转
      if (obj.type !== 3) {
        // 跳转第三方链接
        if (obj && obj.pageType === 4) {
          window.open(obj.url);
        } else {
          this.$router.push({
            path: this.localePath('/m/download', this.$i18n.locale)
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .layout {
    display: flex;

    .left {
      width: $page-left-width;
    }

    .right {
      width: $page-right-width;
    }
  }
}

.cross-line {
  width: 712px;
  height: 2px;
  background: rgba(12, 12, 28, 0.08);
  border-radius: 1px;
}

.article-banner {
  padding: 24px 32px 0 32px;
  width: 648px;

  .banner-img {
    width: 648px;
    height: auto;
    border-radius: 8px;
  }
}
</style>
